<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>个人中心</title>
    <link rel="stylesheet" href="${ctxStatic}/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctxStatic}/app/css/master.css">
    <style>
        .modal-dialog{
            margin-top: 40%;
            margin-left: 20%;
            width: 60%;
        }
    </style>
</head>
<body>
<div class="wrap">
    <section class="userbg">
        <div class="photobox"><img src="${ctxStatic}/app/images/photo.jpg"></div>
    </section>
    <input type="hidden" name="userId" id="userId" value="${user.id}" />
    <input type="hidden" name="openId" id="openId" value="${user.openId}" />
    <section class="menubox">
        <ul>
            <li>
                <a href="#">
                    <i class="icons icon-minbook"></i>
                    <div class="menudes">科类</div>
                    <div class="type-right">
                        <div class="type-wrap">
                            <select class="type-opt" name="kemu" id="kemu">
                                <c:forEach items="${fns:getDictList('kemu_type')}" var="item">
                                    <option value="${item.value}" <c:if test="${user.kmType eq item.value}">selected</c:if> >${item.label}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icons icon-area"></i>
                    <div class="menudes">地区</div>
                    <div class="type-right">
                        <div class="type-wrap">
                            <select class="type-opt" name="area" id="area">
                                <!--
                                <c:forEach items="${provinceList}" var="province">
                                    <option value="${province.code}" <c:if test="${user.areaCode eq province.code}">selected</c:if> >${province.name}</option>
                                </c:forEach>
                                -->
                                <option value="43">湖南省</option>
                            </select>
                        </div>
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icons icon-minbatch "></i>
                    <div class="menudes">批次</div>
                    <div class="type-right">
                        <div class="type-wrap">
                            <select class="type-opt" name="batchLine" id="batchLine">
                                <option value="2" <c:if test="${user.batchLevel eq '2'}">selected</c:if>>本科一批</option>
                                <option value="3" <c:if test="${user.batchLevel eq '3'}">selected</c:if>>本科二批</option>
                            </select>
                        </div>
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icons icon-score"></i>
                    <div class="menudes">分数</div>
                    <div class="type-right" onclick="changeScore('${user.id}');">
                        <span class="type_num font-org userscore">${user.gkScore}</span>
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="${wechat}/wechatAuth?forward=index">
                    <i class="icons icon-score"></i>
                    <div class="menudes">志愿推荐</div>
                    <div class="type-right">
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="${wechat}/favVolunteer">
                    <i class="icons icon-folder"></i>
                    <div class="menudes">我收藏的志愿组合</div>
                    <div class="type-right">
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="${wechat}/favschool">
                    <i class="icons icon-minschool"></i>
                    <div class="menudes">我收藏的学校</div>
                    <div class="type-right">
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
            <li>
                <a href="${wechat}/favMajor">
                    <i class="icons icon-major"></i>
                    <div class="menudes">我收藏的专业</div>
                    <div class="type-right">
                        <span class="icon-arrow icon-next"></span>
                    </div>
                </a>
            </li>
        </ul>
    </section>
</div>
<div class="modal fade" id="scoreModal" tabindex="-1" role="dialog" aria-labelledby="scoreModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body" style="text-align: center;">
                <input type="tel" name="score" id="score" class="form-control" placeholder="分数"
                       style="height: 50px;font-size: 20px;">
            </div>
            <div class="modal-footer" style="padding: 0px;border: none;">
                <button type="button" class="btn btn-primary" id="msgBtn"
                        style="width: 100%;line-height: 30px;border: none;border-radius: 0px;font-size: 18px;">提   交</button>
            </div>
        </div>
    </div>
</div>
<script src="${ctxStatic}/app/js/jquery-1.11.1.min.js"></script>
<script src="${ctxStatic}/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#kemu,#area,#batchLine").change(function(){
            var kemu = $("#kemu").val();
            var area = $("#area").val();
            var batchLine = $("#batchLine").val();
            var url = "${wechat}/updateUserInfo";
            $.post(url,{
                "kemu":kemu,
                "area":area,
                "batchLine":batchLine,
                "userId":$("#userId").val()
            },function(data){
                if(!data.success){
                    alert("系统异常,更新失败");
                }
            });
        });

        $("#msgBtn").click(function(){
            var userId = $("#userId").val();
            var score = $("#score").val();
            var url = "${wechat}/updateUserInfo";
            $.post(url,{
                "score":score,
                "userId":userId
            },function(data){
                if(data.success){
                    $("#scoreModal").modal("hide");
                    $(".userscore").text(score);
                }
            });
        });
    });

    function changeScore(userId){
        $("#scoreModal").modal();
    }
</script>
</body>
</html>